<template>
	<div class="menu-create">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<!-- <span>{{ isEdit ? '编辑菜单' : '添加菜单' }}</span> -->
				<el-page-header @back="goBack" :content="isEdit ? '编辑菜单' : '添加菜单'"></el-page-header>
			</div>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item prop="name" label="菜单名称">
					<el-input v-model="form.name" style="width:60%;"></el-input>
				</el-form-item>
				<el-form-item prop="href" label="菜单路径">
					<el-input v-model="form.href" style="width:60%;"></el-input>
				</el-form-item>
				<el-form-item prop="parentId" label="上级菜单">
					<el-select v-model="form.parentId" placeholder="请选择上级菜单" style="width:60%;">
						<el-option label="无上级菜单" :value="-1"></el-option>
						<el-option
							v-for="item in parentMenuList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="description" label="描述">
					<el-input v-model="form.description" style="width:60%;"></el-input>
				</el-form-item>
				<el-form-item prop="icon" label="前端图标">
					<el-input v-model="form.icon" style="width:60%;"></el-input>
				</el-form-item>
				<el-form-item prop="shown" label="是否显示">
					<el-radio-group v-model="form.shown">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="orderNum" label="排序">
					<el-input-number
						v-model="form.orderNum"
						:min="1"
						label="排序"
					></el-input-number>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">提交</el-button>
					<el-button v-if="!isEdit" @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { createOrUpdateMenu, getEditMenuInfo } from '@/services/menu'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'MenuCreateOrEdit',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        parentId: -1, // -1 表示没有上级菜单
        name: '',
        href: '',
        icon: '',
        orderNum: 0,
        description: '',
        shown: false
      },
      parentMenuList: [] // 父级菜单列表
    }
  },
  methods: {
    async onSubmit () {
      // 1.表单验证
      const { data } = await createOrUpdateMenu(this.form)
      if (data.code === '000000') {
        this.$message.success('提交成功')
        this.$router.back()
      }
    },
    async loadMenuInfo () {
      const { data } = await getEditMenuInfo(this.$route.params.id || -1)
      this.form = data?.data?.menuInfo ?? this.form
      if (data.code === '000000') {
        this.parentMenuList = data?.data?.parentMenuList
      }
    },
    reset () {
      (this.$refs.form as Form).resetFields()
    },
    goBack () {
      this.$router.push('/menu')
    }
  },
  created () {
    this.loadMenuInfo()
  }
})
</script>

<style lang="sass" scoped></style>
